/*
 * 附件列表
 */

import * as React from 'react';
import { connect } from 'react-redux';

import { Row, Col, Tabs, Card } from 'antd';
import CONFIG from 'constants/config';
import { fetchAttachList, toggleItemCheck } from 'actions/attachment';

import LoadableComponent from 'components/common/LoadableComponent';
const LoadableImage = LoadableComponent(() => import('./Image'));
const LoadableAudio = LoadableComponent(() => import('./Audio'));
const LoadableVideo = LoadableComponent(() => import('./Video'));
const LoadableCustomPagination = LoadableComponent(() =>
  import('components/common/CustomPagination')
);
const LoadableSearchUpload = LoadableComponent(() => import('./SearchAndUpload'));

interface AttachProps {
  dispatch: (action: any) => any;
  attachTotal: number;
  doSelect?: boolean;
  selectType?: string;
  selectMax?: number;
}

interface AttachState {
  activeKey: string;
  current: number;
}

class Index extends React.Component<AttachProps, AttachState> {
  pagesize = 30;
  static defaultProps: AttachProps = {
    dispatch: () => {},
    attachTotal: 0,
    doSelect: false,
    selectType: '',
    selectMax: 0,
  };
  constructor(props: AttachProps) {
    super(props);
    this.state = {
      activeKey: props.selectType || CONFIG.ITEM_IMAGE,
      current: 1,
    };
    if (props.doSelect) {
      this.pagesize = 15;
    }
  }

  componentDidMount() {
    this.handleFetchAttachList();
  }

  getMediaType() {
    const { activeKey } = this.state;
    if (activeKey === CONFIG.ITEM_IMAGE) {
      return 0;
    } else if (activeKey === CONFIG.ITEM_AUDIO) {
      return 1;
    } else if (activeKey === CONFIG.ITEM_VIDEO) {
      return 2;
    }
    return -1;
  }

  // 分页回调
  onPageChange = (page: number) => {
    this.setState({
      current: page,
    });
    this.handleFetchAttachList({ page });
  };

  /**
   * 查询附件列表
   */
  handleFetchAttachList = (params: any = {}, isSearch: boolean = false) => {
    const { current: page } = this.state;
    const pageSize = this.pagesize;
    const type = this.getMediaType();

    params = { page, pageSize, ...params };
    if (isSearch) {
      params.page = 1;
    }
    if (type >= 0) {
      params.type = type;
    }
    this.props.dispatch(fetchAttachList(params));
  };

  handleCheckChange = (target: any, checked: boolean) => {
    const { dispatch, doSelect, selectMax } = this.props;

    if (doSelect) {
      dispatch(toggleItemCheck(target, checked, selectMax));
    }
  };

  // 刷新当前数据
  handleUploaded = (data?: any) => {
    this.handleFetchAttachList({}, true);
  };

  // 不是doSelect特定附件的场景的话，则不限定附件类型
  handleSearch = (name: string) => {
    let params = {};
    if (name) {
      params = { name };
    }
    this.handleFetchAttachList(params, true);
  };

  handleChange = (activeKey: string) => {
    this.setState(
      {
        activeKey,
        current: 1,
      },
      this.handleFetchAttachList
    );
  };

  render() {
    const { attachTotal, doSelect, selectType, selectMax } = this.props;
    const { activeKey, current } = this.state;

    const paginParams = {
      current,
      total: attachTotal,
      pageSize: this.pagesize,
      onChange: this.onPageChange,
    };

    let uploadProps: any = {
      onUploaded: this.handleUploaded,
      onSearch: this.handleSearch,
      activeKey,
    };
    if (doSelect && selectType) {
      uploadProps['accept'] = selectType;
    }

    const otherProps = {
      doSelect,
      selectMax,
      handleCheckChange: this.handleCheckChange,
      handleFetchAttachList: this.handleFetchAttachList,
    };

    return (
      <div>
        <Card bordered={false}>
          <div className="attachment-category-wrapper">
            <Row type="flex" align="middle">
              <Col span={24}>
                <Tabs
                  className="fixed-tabs"
                  activeKey={activeKey}
                  onChange={this.handleChange}
                  animated={false}>
                  {(!selectType || selectType === CONFIG.ITEM_IMAGE) && (
                    <Tabs.TabPane tab="图片(PNG|JPG)" key={CONFIG.ITEM_IMAGE}>
                      <LoadableSearchUpload {...uploadProps} />
                      <LoadableImage {...otherProps} />
                      <LoadableCustomPagination {...paginParams} />
                    </Tabs.TabPane>
                  )}

                  {(!selectType || selectType === CONFIG.ITEM_AUDIO) && (
                    <Tabs.TabPane tab="音频(MP3)" key={CONFIG.ITEM_AUDIO}>
                      <LoadableSearchUpload {...uploadProps} />
                      <LoadableAudio {...otherProps} />
                      <LoadableCustomPagination {...paginParams} />
                    </Tabs.TabPane>
                  )}

                  {(!selectType || selectType === CONFIG.ITEM_VIDEO) && (
                    <Tabs.TabPane tab="视频(MP4)" key={CONFIG.ITEM_VIDEO}>
                      <LoadableSearchUpload {...uploadProps} />
                      <LoadableVideo {...otherProps} />
                      <LoadableCustomPagination {...paginParams} />
                    </Tabs.TabPane>
                  )}
                </Tabs>
              </Col>
            </Row>
          </div>
        </Card>
      </div>
    );
  }
}

function mapStateToProps(state: any) {
  const { attachTotal } = state.attachment;

  return {
    attachTotal,
  };
}
export default connect(mapStateToProps)(Index);
